import { motion } from "framer-motion";
import React from "react";


export const FadeInUpComp = ({children, delay, ...others}) => {
  const ANIMATION = {
    compInit: {opacity: 0, y: 100},
    compExit: {opacity: 0, y: 100},
    compVisible: {opacity: 1, y: 0},
    transition: {duration: 0.5}
  }

  return (
    <motion.div
      initial={ANIMATION.compInit}
      animate={ANIMATION.compVisible}
      exit={ANIMATION.compExit}
      transition={{...ANIMATION.transition, ...{delay}}}
      {...others}
    >
      {children}
    </motion.div>
  )
}

export const FadeInRightComp = ({children, delay, ...others}) => {
  const ANIMATION = {
    compInit: {opacity: 0, x: 100},
    compExit: {opacity: 0, x: 100},
    compVisible: {opacity: 1, x: 0},
    transition: {duration: 0.5}
  }

  return (
    <motion.div
      initial={ANIMATION.compInit}
      animate={ANIMATION.compVisible}
      exit={ANIMATION.compExit}
      transition={{...ANIMATION.transition, ...{delay}}}
      {...others}
    >
      {children}
    </motion.div>
  )
}

export const FadeInLeftComp = ({children, delay, ...others}) => {
  const ANIMATION = {
    compInit: {opacity: 0, x: -100},
    compExit: {opacity: 0, x: -100},
    compVisible: {opacity: 1, x: 0},
    transition: {duration: 0.5}
  }

  return (
    <motion.div
      initial={ANIMATION.compInit}
      animate={ANIMATION.compVisible}
      exit={ANIMATION.compExit}
      transition={{...ANIMATION.transition, ...{delay}}}
      {...others}
    >
      {children}
    </motion.div>
  )
}

export const FadeInComp = ({children, delay, ...others}) => {
  const ANIMATION = {
    compInit: {opacity: 0},
    compExit: {opacity: 0},
    compVisible: {opacity: 1},
    transition: {duration: 0.5}
  }

  return (
    <motion.div
      initial={ANIMATION.compInit}
      animate={ANIMATION.compVisible}
      exit={ANIMATION.compExit}
      transition={{...ANIMATION.transition, ...{delay}}}
      {...others}
    >
      {children}
    </motion.div>
  )
}